<template>
    <!-- 搜索结果页 -->
    <div class="search-result-container">
      <!-- 头部导航 -->
      <van-nav-bar
        title="搜索结果"
        left-arrow
        @click-left="$router.go(-1)"
        fixed
      />
      <!-- 搜索结果列表 -->
      <div class="search-result-list">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多数据啦!"
          @load="handleLoad"
          :immediate-check="false"
          offset="50"
          >
          <!-- 循环ArtcileItem组件、独立传值 -->
          <article-item
            v-for="obj in resultList"
            :key="obj.art_id"
            :item="obj"
            :showCross="false"
          />
        </van-list>
      </div>
    </div>
</template>

<script>
import { getSearchResultListAPI } from '@/api/search'
export default {
  name: 'SearchResultView',
  data () {
    return {
      // 页码，默认是第1页
      page: 1,
      // 结果列表
      resultList: [],
      // 控制每一页数据的加载状态
      loading: false,
      // 控制整个数据的加载状态
      finished: false
    }
  },
  activated () {
    console.log('进入了搜索结果页')
    this.getSearchResuleList()
  },
  // 组件失活的时候，重新数据状态
  deactivated () {
    this.resultList = []
    this.page = 1
    this.loading = false
    this.finished = false
  },
  methods: {
    // 获取搜索结果列表
    async getSearchResuleList () {
      // 调接口发请求
      const resp = await getSearchResultListAPI(
        this.$route.params.keyword,
        this.page,
        10
      )
      // 如果后台没有数据了
      if (!resp.data.results.length) {
        // 意味着整个列表加载结束
        this.finished = true
        return
      }
      // 保存结果列表(旧新数组合并)
      // 第1次：resultList是空数组，不影响合并结果
      this.resultList = [...this.resultList, ...resp.data.results]
      // 重置loading状态为false
      this.loading = false
    },
    // 上拉加载
    handleLoad () {
      // 页码自增
      this.page++
      // 获取下一页结果列表数据
      this.getSearchResuleList()
    }
  }
}
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
</style>
